// 全局样式
// 全局容器
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.wid{
  width:350px;
  margin-left: auto;
  margin-right: auto;
}
.img-box{
  overflow: hidden;
  img{
    display: block;
    width: 100%;
  }
}
.main-container{
  padding-bottom: 60px;
}
.footer{
  position: fixed;
  bottom: 0;
  z-index: 10;
  background: #fff;
  width: 100%;
  height:60px;
  border-top: 1px solid #eee;

  ul{
    display: flex;
    justify-content: space-between;
    li{
      flex: 0 0 40%;
      .icon{
        width: 26px;
        height: 26px;
        margin: 6px 0 5px 0;
        transition: .5s;
      }
    }
    .sao-icon{
      flex: 0 0 20%;
      transform: translateY(-20px);
    }
    .nav-list{
      display: flex;
      justify-content: space-between;
      .item{
        flex: 0 0 50%;
        text-align: center;
        color: #999;
      }
      .active{
        color: #7e6eeb;
      }
    }
  }

}



.home{
  min-height: 10rem;
  background-image: url(../images/index-bg.png);
  background-position: center top ;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 100%;
  .home-header{
    display: flex;
    justify-content: space-between;
    padding: 20px 0!important;
    img{
      display: block;
      width: 14px;
      margin-left: auto;
      margin: auto;
      margin-bottom: 5px;
    }
    span{
      color: #fff;
      text-align: center;
      font-size: 8px;
    }
    .search-box{
      width: 250px;
      position: relative;
      height: 30px;
      input{
        position: absolute;
        width: 200px;
        padding-right: 50px;
        left: 0;
        line-height: 30px;
        border-radius: 30px;
        border: none;
        text-indent: 20px;
        font-size: 12px;
        color: #7c7c7c;
      }
      .search{
        position: absolute;
        width: 50px;
        height: 30px;
        background-image: url(../images/search.png);
        background-position: center center ;
        background-repeat: no-repeat;
        background-size:14px;
        right: 0;
      }
    }
  }
  // index-banner
.banner-box{
  border-radius: 10px;
  overflow: hidden;
  -moz-box-shadow:0px 7px 20px 0px #b8aff7;
  -webkit-box-shadow:0px 7px 20px 0px #b8aff7;
  box-shadow:0px 7px 20px 0px #b8aff7;
  background: #7e6eeb;
  img{
    width: 100%;
    display: block;
    border-radius: 10px;
  }
  .swiper-pagination-bullet-active{
    background: #7e6eeb;
  }
}
// idnex-icon
  .index-icon{
    margin-top: 20px;
    .icon-box{
      display:flex;
      flex-wrap: wrap;
      li{
        flex:0 0 25%;
        text-align: center;
        color: #b2b2b2;
      }
      img{
        display: block;
        width: 40px;
        text-align: center;
        margin: 10px auto;
      }
    }
  }
  .index-ban{
    margin-top: 20px;
    border-radius: 5px;
  }
  .smallSection{
    margin-top: 20px;
    .img-box{
      border-radius: 5px;
    }
    .fl{
      width: 190px;
      .img-box{
        margin-bottom: 10px;
        height: 70px;
      }
      .img-box:nth-child(2){
        margin-bottom: 0;
      }
    }
    .fr{
      width: 150px;
      height: 150px;
      overflow: hidden;
      border-radius: 5px;

      .img-box{
        transform: translateY(-5px);
      }
    }
  }
  .index-new{
    box-shadow: 0px 4px 22.56px 1.44px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
    padding:10px 20px;
    border-radius: 10px;
    .fl{
      text-align:right;
      padding-right: 8%;
      border-right: 1px solid #dcdcdc;
      h1{
        font-size: 24px;
      }
      p{
        line-height: 20px;
        font-size: 12px;
        color: #999;
      }
    }
    .fr{
      p{
        line-height: 20px;
        background-image: url(../images/list-cir.png);
        background-repeat: no-repeat;
        padding-left: 6%;
        margin-right: 4%;
        background-position: left center;
        background-size: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p:nth-child(2){
        opacity: .5;
      }
    }
  }
  .index-tit{
    font-size: 18px;
    color: #333;
    padding-bottom: 20px;
  }
  .index-discount{
    margin-top: 20px;
    .list-box{
      display: flex;
      justify-content: space-between;
      li{
        width: 109px;
        height: 79px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
        color: #fff;
        padding-left: 15px;
        padding-top: 15px;
        p{
          font-size: 14px;
          padding-bottom: 5px;
        }
        span{
          font-size: 10px;
          opacity: .5;
        }
      }
    }
  }
  .index-like{
    margin-top: 20px;
    li{
      background: url(../images/like1.png) no-repeat center center;
      background-size: 100%;
      color: #fff;
      padding: 20px 20px;
      margin-bottom: 10px;
      border-radius: 10px;
      .fl{
        p{
          font-size: 20px;
          font-weight: bold;
          height: 30px;
          line-height: 30px;
        }
      }
      p{
        padding-bottom: 5px;
        line-height: 30px;
        font-size: 14px;
        height: 30px;

      }
      span{
        font-size: 12px;
        opacity: .5;
      }
    }
    li:nth-child(2n){
      background: url(../images/like2.png) no-repeat center center;
    }
  }
  .index-hot{
    margin-top: 20px;
    .how-icon{
      display: flex;
      justify-content: space-between;
      img{
        display: block;
        width: 70px;
      }
      li{
        text-align: center;
        color: #999;
      }
    }
  }
  .newbie{
    li:nth-child(2n) .progress .bg{
      background: #7e6eeb;
    }
    li:nth-child(3n) .progress .bg{
      background: #1d4571;
    }
    li{
      width: 100%;
      padding: 10px 20px;
      border-radius: 10px;
      box-shadow: 0px 4px 22.56px 5px rgba(0, 0, 0, 0.08);
      margin-bottom: 10px;
      .header{
        line-height: 40px;
        padding-right: 5px;
        font-size: 14px;
        span{
          color: #fa565d;
          border: 1px solid #fa565d;
          padding: 0 5px;
          margin-left: 10px;
          font-size: 12px;
        }
      }
      .list-box{
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        p{
          font-size: 16px;
          color: #333;
          padding-bottom: 5px;
        }
        span{
          font-size: 12px;
          color: #999;
        }
      }
      .list-box div:nth-child(1){
        p{        
          color:#fa565d ;
          font-weight: bold;
        }
      }
      .progress{
        width: 100%;
        height: 4px;
        background: #eeeeee;
        border-radius: 2px;
        position: relative;
        margin-bottom: 20px;
        .bg{
          position: absolute;
          left: 0;
          top: 0;
          height: 4px;
          border-radius: 2px;
          width: 70%;
          background: #fa565d;
          transition: .5s;
          display: block;
        }
      }
      .footer{
        display: flex;
        justify-content: space-between;
        color: #666;
      }
    }
  }
  .index-card{
    margin-top: 20px;
    li{
      margin-top: 10px;
      box-shadow: 0px 4px 22.56px 5px rgba(0, 0, 0, 0.08);
      padding: 14px 0;
      .container{
        justify-content: space-between;
        display: flex;
        padding:  0 10px;
      }
      .img-box{
        width: 46px;
      }
      button{
        background: #7e6eeb;
        line-height: 28px;
        padding:0 20px ;
        border-radius: 18px;
        color: #fff;
        border: none;
        margin-top: 5px;
      }
      .text{
        flex: 1;
        margin-left: 10px;
        p{
          font-size: 16px;
          padding-bottom: 10px;
        }
        span{
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
  .idnex-new{
    margin-top: 20px;
    .new-list li{
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .img-box{
        width: 120px;
        overflow: hidden;
        border-radius: 4px;
        flex:  0 0 30%;
        img{
        }
      }
      .text-box{
        flex:  0 0 65%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h2{
          font-size: 14px;
          line-height: 1.5;
          font-weight: normal;
          height: 42px;
          overflow: hidden;
        }
        .time{
          text-align: right;
          line-height: 2;
          color: #999;
          font-size: 8px;
        }
        .footer{
          color: #999;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .index-user{
    margin-top: 20px;
    .user-list{
      display: flex;
      justify-content: space-between;
      li{
        float: 0 0 25%;
        text-align: center;
        img{
          display: block;
          width: 70px;
        }
      }
    }
  }
  .userbanner{
    margin-top: 20px;
  }
}

.title{
  font-size: 16px;
  text-align: center;
  color: #fff;
  font-weight: normal;
  line-height: 60px;
}
.User{
  min-height: 10rem;
  background-image: url(../images/user-bg.png);
  background-position: center top ;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 100%;
  .user-info{
    background: #fff;
    border-radius: 10px;
    padding: 20px 20px;
    box-shadow: 0px 5px 30px 0px rgba(28, 44, 29, 0.17);

    .user-list,.num-list{
      display: flex;
      justify-content: space-between;
    }
    
    .user-list{
      .img-box{
        width: 60px;
        height: 60px;
        overflow: hidden;
        border-radius: 50%;
        box-shadow: inset 0px 7px 15px 0px rgba(50, 97, 57, 0.35);
      }
      .user-text{
        flex: 1;
        margin-left: 20px;
        p{
          font-size: 16px;
          padding: 10px 0;
        }
        span{
          color: #999;
        }
      }
      .qiandao{
        background: url(../images/qindao.png) no-repeat right center;
        height: 24px;
        line-height: 24px;
        background-size: contain;
        padding: 0 10px;
        color: #fff;
        transform: translateX(25px);
      }
    }
    .num-list{
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      li{
        text-align: center;
        p{
          font-size: 14px;
          padding: 10px 0 5px 0;
        }
        span{
          font-size: 10px;
          color:#999;
        }
      }
    }
  }
  .uuser-icon{
    margin-top: 20px;
    .list-box{
      display: flex;
      justify-content: space-between;
      padding:0 10px ;
      img{
        width: 40px;
        margin: 5px auto;
      }
    }
  }

  .userbanner{
    margin: 20px auto;
  }
  .user-hot{
    .list-box{
      display: flex;
      justify-content: space-between;
      li{
        flex: 0 0 30%;
      }
    }
  }

  .loginOut{
    background:#7e6eeb;
    color: #fff;
    border: none;
    width: 300px;
    margin: 20px auto;
    display: block;
    line-height: 36px;
    border-radius: 18px;
    font-size: 14px;
  }

}
.Login{
  background-image: url(../images/login-bg.png);
  background-position: center center ;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size:cover;
  .logo{
    width: 120px;
    margin-top: 80px;
  }
  .logo-info{
    margin-top: 40px;
    width: 320px;
    padding:0 40px;
    background: url(../images/login-info-bg.png) no-repeat top center;
    height: 420px;
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
    .user-num{
      padding-top: 60px;
      li{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        padding-left: 30px;
        line-height: 30px;
        border-bottom: 1px solid #ccc;
        background:url(../images/loginicon2.png) no-repeat left center;
        background-size: 20px;
        input{
          width: 100%;
          border:none;
          color: #666;
        }
      }
      li:nth-child(2){
        background:url(../images/loginicon1.png) no-repeat left center;
        background-size: 20px;

      }
    }
    .login-btn{
      margin-top: 20px;

      display: block;
      width: 100%;
      height: 36px;
      border-radius: 4px;
      border: none;
      background: #7e6eeb;
      color: #fff;
    }
    .user-icon{
      margin-top: 40px;
      display: table;
      justify-content: space-between;
      margin-left: auto;
      margin-right: auto;
      img{
        width: 30px;
        margin-left: auto;
        margin-right: auto;
      }
      li{
        float: left;
        padding: 20px;
      }
    }
  }
}

